<template>
	<div class="hello">
		<div class="main">
			<div class="change">
				<div class="left">
					<picker mode="multiSelector" :range="appDate"  @change="bindDateChange">
						<view class="uni-input">{{appDate[0][dateIndex]}} <span class="iconfont"> &#xe60c;</span></view>
					</picker>
				</div>
				<div class="right">
					<picker mode="multiSelector" :range="arrDate" @change="bindDateChange">
						<view class="uni-input">{{arrDate[0][dateIndex]}}<span class="iconfont"> &#xe60c;</span></view>
					</picker>
				</div>

			</div>
			<div class="uls">
						<div @click="ones()" :class="{ 'active': is==1}">
							今日
						</div>
						<div @click="twos()" :class="{ 'active': is==2 }">
							昨天
						</div>
						<div @click="threes()" :class="{ 'active': is==3}">
							七天
						</div>
						<div @click="fours()" :class="{ 'active': is==4 }" class="boxs">
							30天
						</div>
			</div>
			<div class="xianfu">
				<Eacharslist :Elist="list"></Eacharslist>
			</div>
		</div>
		
	</div>
</template>

<script>
	import Eacharslist from "@/component/eacharslist.vue"
	export default {
		name: 'HelloWorld',
		components:{
			Eacharslist
		},
		data() {
			return {
				shop_id:"",
				onKeyword: '',
				arrDate: [
					['全部', "今天", "昨天", "这周", "这月"]
				],

				appDate: [
					["全部",'今日支付', "昨日支付", "这周支付", "这月"]
				],
				dateIndex: 0,
				dateIndexOne: 0,
				array: ['全部', '今日', '昨日', '本周', "本月"],
				is: 1,
				token:'',
				list:[100,50,100,50,100,50],
				index: 0,
				"text": "666",
				one: false,
				three: false,
				four: false,
				two: false,
				msg: "Welcome to Your Vue.js App",
				onelist: [10, 13, 11, 13, 12, 18],
				twolist: [9, 8, 11, 16, 18, 15],
				threelist: [70, 50, 61, 66, 70, 88],
				fourlist: [300, 280, 470, 500, 300, 400]
			}
		},
		mounted() {
			this.$nextTick(function() {
				this.ones();
			});
		},
		created() {
			this.shop_ids()
		},
		methods: {
			GOlist(day){
				var shop_id=""
				var that=this
				that.$flyio.get('v1.Shop/ShopSale', {
				select_type:day,
				shop_id	:14
				}).then((ret) => {
				that.list = ret.data
			})
			.catch((e) => {
				console.log(e)
			})
			},
			shop_ids(){
				var that=this
				wx.getStorage({
				  key: 'shop_id',
				  success (res) {
					  that.shop_id=res.data
					  console.log("商铺销售信息");
					  console.log(res);
				  },
				  fail(){
					  console.log("获取店铺id失败");
				  }
				})
			},
			bindDateChange: function(e) {
				// console.log(e.detail.value)
				this.dateIndex = e.detail.value[0];
				console.log(this.dateIndex)
				switch (this.dateIndex) {
					case 1:
						this.ones()
						break;
					case 2:
						this.twos()
						break;
					case 3:
						this.threes()
						break;
					case 4:
						this.fours()
						break;
					default:
						break;
				}
				// console.log(this.dateIndex,this.dateIndexOne)
			},
			bindDateChange1: function(e) {
				console.log(e.detail.value)
				this.dateIndexOne = e.detail.value[0];
				console.log(this.dateIndex)
				switch (this.dateIndexOne) {
					case 1:
						this.ones()
						break;
					case 2:
						this.twos()
						break;
					case 3:
						this.threes()
						break;
					case 4:
						this.fours()
						break;
					default:
						break;
				}
				// console.log(this.dateIndex,this.dateIndexOne)
			},
			ones() {
				var that=this
				this.is = 1
				// console.log("生成今日图")
				this.one = true
				this.two = false
				this.three = false
				this.four = false
				that.list=that.onelist
				
				var riqi="d"
				var time=['4时', '8时', '12时', '16时', '20时', "24时"]
				try {
				  wx.setStorageSync('time', time)
				} catch (e) { }
				this.GOlist(riqi)
				// this.today(this.onelist)
			},
			twos() {
				var that=this
				this.is = 2
				
				this.one = false
				this.two = true
				this.three = false
				this.four = false
				that.list=that.twolist
				var riqi="zd"
				var time=['4时', '8时', '12时', '16时', '20时', "24时"]
				try {
				  wx.setStorageSync('time', time)
				} catch (e) { }
				this.GOlist(riqi)
			},
			threes() {
				var that=this
				this.is = 3
				
				this.one = false
				this.two = false
				this.three = true
				this.four = false
				that.list=this.threelist
				var riqi="w"
				var time=['周一', '周二', '周三', '周四', '周五', "周末"]
				try {
				  wx.setStorageSync('time', time)
				} catch (e) { }
				this.GOlist(riqi)
			},
			fours() {
				var that=this
				this.is = 4
				
				this.four = true
				this.one = false
				this.two = false
				this.three = false
				this.list=this.fourlist
				var riqi="m"
				var time=['第一周', '第二周', '第三周', '第四周']
				try {
				  wx.setStorageSync('time', time)
				} catch (e) { }
				this.GOlist(riqi)
			}
		},

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped="scoped" lang="scss">
	.active {
		background-color: $u-type-primary;
		color: $f;
	}
	.iconfont {
		margin: 0 10upx;
		font-family: "iconfont" !important;
		font-size: 22upx;
		font-style: normal;
		color: gary;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		vertical-align: middle;
	}

	.hello {
		font-size: 20upx;
		background-color: #ffffff;
		height: 480upx;
		.main {
			background-color: #FFFFFF;
			position: relative;
					.uls {
						// box-sizing: border-box;
						text-align: center;
						width: 640upx;
						margin: 0 auto;
						margin-bottom: 105upx;
						border-radius: 30upx;
						border: 4upx  solid  $u-type-primary;
						overflow: hidden;
						font-size: 16upx;
						height: 55upx;
						line-height: 50upx;
						display: flex;
						flex-direction: row;
						div{
							flex: 1;
						}
					}
				// }
			
			.change {
				color: #999999;
				width: 640upx;
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 95upx;
				line-height: 95upx;
			}
		}
		.xianfu{
			// border: 1px solid red;
			height: 100%;
			width: 640rpx;
			height: 180rpx;
			margin: 0 auto;
		}
		
		// background-color: red;
		padding-bottom: 0;
	}

	select {
		border: 0;
	}
</style>
